<template>
  <div v-dragWindow class="setting">
    <div @click="close" class="close">
      <i class="iconfont">&#xe613;</i>
    </div>
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="隐私设置" name="privacy">
        <Privacy ref="PrivacyCom"></Privacy>
      </el-tab-pane>
      <el-tab-pane label="个性化" name="personallize">
        <Personallize></Personallize>
      </el-tab-pane>
      <el-tab-pane label="我的账号" name="account">
        <Account></Account>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import Privacy from "./components/privacy.vue";
import Account from "./components/account.vue";
import Personallize from "./components/personallize.vue";
import { isElectron } from "@/utils";
export default defineComponent({
  name: "",
  components: {
    Privacy,
    Account,
    Personallize,
  },
  setup() {
    const PrivacyCom = ref(false)
    const activeName = ref("personallize");
    const { ipcRenderer } = require("electron");
    ipcRenderer.on("iconSet", (event, obj) => {
      console.log(obj)
      if (obj.iconSet) activeName.value = 'personallize'
    });
    function close() {
      console.log("close");
      if (!isElectron()) return;
      const { ipcRenderer } = window.require("electron");
      ipcRenderer.invoke("close-setting",PrivacyCom?.value?.isTop);
    }
    

    return { PrivacyCom, close, activeName };
  },
});
</script>
<style scoped lang="scss">
.setting {
  width: 100%;
  height: 100vh;
  // padding: 10px 25px;
  box-sizing: border-box;
  overflow: auto;
}

.demo-tabs {
  width: 100%;
}
</style>
<style lang="scss">
.setting {
  .close {
    position: absolute;
    top: 10px;
    z-index: 3;
    right: 10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
  }

  .el-tabs__header {
    margin-bottom: 0;
    border-bottom: 1px solid #E2E2E2;
  }

  .el-tabs__nav {
    transform: translateX(26px) !important;
    height: 60px;
  }

  .el-tabs__item {
    height: 60px !important;
  }

  .el-tabs__nav-wrap::after {
    border: none;
    background: transparent;
  }
}
</style>
